<template>
  <div>
    <div class="quote-board price-list">
      <div class="date-time content">
        <h4>独立部分</h4>
        <table border="1">
          <tr>
            <th>名称</th>
            <th>应用版本</th>
            <th>价格（页）</th>
            <th>数量</th>
            <!--<th>参考图</th>-->
          </tr>

          <template v-for="item in list_type_1">
            <tr>
              <td rowspan="2">{{item.name}}</td>
              <td v-if="item.version_price[0][0] == 0">无</td>
              <td v-else>电脑端</td>
              <td>{{item.version_price[0][1]}}</td>
              <td>
                <input type="number" v-on:input="checkNumber(item.id,item.name,item.version_price[0][0],item.version_price[0][1],$event)">
              </td>
             <!-- <td>
                <span>查看</span>
                <span>说明</span>
              </td>-->
            </tr>

            <tr  v-if="item.version_price[1] != undefined">
              <td v-if="item.version_price[1][0] == 0">无</td>
              <td v-else>手机端</td>
              <td>{{item.version_price[1][1]}}</td>
              <td>
                <input type="number" v-on:input="checkNumber(item.id,item.name,item.version_price[1][0],item.version_price[1][1],$event)">
              </td>
            <!--  <td>
                <span>查看</span>
                <span>说明</span>
              </td>-->
            </tr>
          </template>
        </table>
      </div>
      <div class="date-time content" v-if="list_type_2 != ''">
        <h4>通用部分</h4>
        <table border="1">
          <tr>
            <th>名称</th>
            <th>应用版本</th>
            <th>价格（页）</th>
            <th>数量：（90元/小时）</th>
           <!-- <th>参考图</th>-->
          </tr>

          <template v-for="item in list_type_2">
            <tr>
              <td rowspan="2">{{item.name}}</td>
              <td v-if="item.version_price[0][0] == 0">无</td>
              <td v-else>电脑端</td>
              <td>{{item.version_price[0][1]}}</td>
              <td>
                <input type="number"  v-on:input="checkNumber(item.id,item.name,item.version_price[0][0],item.version_price[0][1],$event)">
              </td>
            <!--  <td>
                <span>查看</span>
                <span>说明</span>
              </td>-->
            </tr>

            <tr v-if="item.version_price[1] != undefined">
              <td>手机端</td>
              <td>{{item.version_price[1][1]}}</td>
              <td>
                <input type="number" v-on:input="checkNumber(item.id,item.name,item.version_price[1][0],item.version_price[1][1],$event)">
              </td>
            <!--  <td>
                <span>查看</span>
                <span>说明</span>
              </td>-->
            </tr>
          </template>

        </table>
      </div>
    </div>
    <div class="calculate">
      <button class="button link" @click="clciFn">
        下一步
      </button>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default{
    name:'step2Setting',
    created: function() {
          var that=this;
          localStorage.setItem('list','');
          var cate_id=localStorage.getItem('cate_id');
          axios.post(this.HOST+'/api/Index/getSingle',{
              cate_id: cate_id,
          }).then(function (response) {
                  var info=response.data.data.info;
                  console.log(info);
                  that.list_type_1=info.type_1;
                  that.list_type_2=info.type_2;
              })
              .catch(function (response) {
                  console.log(response);
              });
    },
    data() {
      return {
         list_type_1:[],
         list_type_2:[],
         list:[],
      }
    },
    methods: {
        checkNumber(id,name,version,price,event) {

            var item=new Object();
            item.id=id;
            item.version=version;
            if(version==1){
              item.version_str="电脑版";
            }else if(version==4){
               item.version_str="手机版";
            }
            item.num=event.data;
            item.price=price;
            item.name=name
            this.list.push(item);
          },
        clciFn(){
            var that=this;
            var list=JSON.stringify(this.list);
            localStorage.setItem('list',list);
            var project_id=localStorage.getItem('project_id');
            if(project_id!=undefined){
                var develop_model=localStorage.getItem('develop_model');
                axios.post(this.HOST+'/api/Index/savePrice',{
                    info_str: list,
                    project_id:project_id,
                    develop_model:develop_model
                }).then(function (response) {
                    that.$router.push({path:'/quote/step3'});
                }).catch(function (response) {
                    console.log(response);
                });
            }
        },
      },

  }
</script>

<style scoped>
  .quote-board {
    margin: 2rem auto;
    max-width: 980px;
    padding: 3rem 3rem 4rem;
    border-radius: .4rem;
    background-color: #fff;
    width: 100%;
  }
  .price-list .date-time {
    width: 100%;
    margin: 40px auto 0;
    background: #c9ccd2;
  }
  .price-list .date-time h4 {
    font-size: 1.2rem;
    padding: 0.7rem;
    text-align: center;
    color: #fff;
  }
  .price-list .date-time table {
    \width: 100%;
    background: #fff;
    border-collapse:collapse;
    border-color: hsla(212,9%,63%,.2);
  }
  .price-list .date-time table td, .price-list .date-time table th {
    padding: 0.5rem;
    text-align: center;
  }
  .price-list .date-time table th {
    background: #f3f5f7;
  }
  .price-list .date-time table td span {
    cursor: pointer;
  }
  .calculate {
    margin: 2.5rem auto;
    text-align: center;
  }
  .calculate .button {
    width: 33%;
    height: 4.1rem;
    line-height: 2.1rem;
    font-size: 1.5rem;
    min-width: 17rem;
    background: #4289db;
    color: #fff;
    cursor: pointer;
    border-radius: .4rem;
    border: 0;
    box-shadow: 0 3px 3px rgba(45,51,56,.2);
    outline: none;
  }
  .calculate .link {
    display: inline-block;
    color: #fff;
    line-height: 4.1rem;
  }
</style>
